<template>
	<el-card shadow="hover">
		<div class="flex">
			<div class="depart-style"><roleManagement ref="roleManagementRef" @input="input" @type="getType" /></div>
			<div class="person-style">
				<div class="lineClass">
					<div v-if="type === 3">
						<span style="width: 100px;">角色名称：</span>
						{{ roleInfo.rName }}
					</div>
					<div v-else style="display: flex;width: 100%;">
						<div style="width: 100px;">角色名称：</div>
						<div style="width: 100%;">
							<el-input v-model.trim="roleInfo.rName" maxlength="15" show-word-limit placeholder="请输入角色名称" />
							<div class="rNameError">{{ rNameError }}</div>
						</div>
					</div>
				</div>
				<div class="lineClass">
					<div v-if="type === 3">
						<span style="width: 100px;">角色描述：</span>
						{{ roleInfo.description }}
					</div>
					<div v-else style="display: flex;width: 100%;">
						<div style="width: 100px;">角色描述：</div>
						<el-input
							v-model.trim="roleInfo.description"
							type="textarea"
							maxlength="100"
							show-word-limit
							:autosize="{ minRows: 2, maxRows: 3 }"
							placeholder="请输入角色描述"
						/>
					</div>
				</div>
				<div class="noLineClass">
					<div>功能权限：</div>
					<div class="firstMenu"><showRole :all-role="menu" :selected-role="selectMenu" @getChecked="getCheckedBList" /></div>
				</div>
				<div v-if="type !== 3" class="noLineClass">
					<el-button style="margin-left: 80px;" :loading="loading" type="primary" @click="onSubmit">完成</el-button>
					<el-button @click="roleManagementRef.getRoleListApi()">取消</el-button>
				</div>
			</div>
		</div>
	</el-card>
</template>

<script lang="ts">
import { toRefs, reactive, watch } from 'vue'
import roleManagement from './component/roleManagement.vue'
import showRole from './component/showRole.vue'
import { ElMessage } from 'element-plus'
import { getMenu } from '/@/api/menu'
import { getPermissionByRoleId, addRole, updateRole } from '/@/api/role'

export default {
	name: 'rolePermissions',
	components: { roleManagement, showRole },
	setup() {
		const refs = reactive({
			roleManagementRef: null
		})

		const state = reactive({
			roleInfo: {},
			type: 3, // 1:add,2:edit,3:show
			loading: false,
			rNameError: '',
			menu: [],
			selectMenu: []
		})

		watch(state, val => {
			if (val.roleInfo.rName.length === 0) {
				state.rNameError = '请输入角色名称'
			} else {
				state.rNameError = ''
			}
		})

		const input = val => {
			state.roleInfo = { ...val }
		}

		const init = () => {
			state.rNameError = ''
			state.menu = []
			state.selectMenu = []
		}

		const getChild = (result = [], data) => {
			data.forEach(x => {
				result.push(x.id)
				if (x.list && x.list.length > 0) {
					getChild(result, x.list)
				}
			})
			return result
		}

		const getType = async (val = 3) => {
			state.type = val
			init()
			switch (state.type) {
				case 1:
					await getMenu({ state: 1 }).then(res => {
						const { datas } = res

						state.menu = datas.brand
					})
					break
				case 2:
					await getMenu({ state: 1 }).then(res => {
						const { datas } = res

						state.menu = datas.brand
					})

					await getPermissionByRoleId({ roleId: [state.roleInfo.id] }).then(res => {
						const { datas } = res

						state.selectMenu = getChild([], datas.bList)
					})
					break
				case 3:
					await getPermissionByRoleId({ roleId: [state.roleInfo.id] }).then(res => {
						const { datas } = res

						state.menu = datas.bList
					})
					break
			}
		}

		const getCheckedBList = val => {
			state.selectMenu = val
		}

		const onSubmit = async () => {
			if (state.rNameError.length > 0) {
				return
			}

			state.loading = true

			const otherParams = {
				permissions: [...state.selectMenu]
			}

			switch (state.type) {
				case 1:
					// 新增操作
					await addRole({ ...state.roleInfo, ...otherParams }).finally(() => {
						state.loading = false
					})
					ElMessage.success('新增成功')
					refs.roleManagementRef.getRoleListApi()
					break
				case 2:
					// 编辑操作
					await updateRole({ ...state.roleInfo, ...otherParams }).finally(() => {
						state.loading = false
					})
					ElMessage.success('编辑成功')
					refs.roleManagementRef.getRoleListApi()
					break
			}
		}

		return {
			getType,
			input,
			getCheckedBList,
			onSubmit,
			...toRefs(refs),
			...toRefs(state)
		}
	}
}
</script>

<style lang="scss" scoped>
.depart-style {
	min-width: 260px;
	border-right: 1px solid #e6e9ef;
}
.person-style {
	padding: 20px;
	min-width: calc(100% - 260px);

	.lineClass {
		display: flex;
		padding: 24px 0;
		border-bottom: 1px solid #e6e9ef;
	}

	.noLineClass {
		display: flex;
		padding: 24px 0;
	}

	.firstMenu {
		margin-right: 12px;
		flex: 1;
	}

	.secondMenu {
		flex: 1;
	}

	.rNameError {
		margin-top: 5px;
		font-size: 12px;
		color: red;
	}
}
</style>
